<template>
  <!-- charts 模板-->
  <div>
    <!-- 卡片视图 -->
    <el-card>
      光电
      <!-- 2. 为ECharts准备一个具备大小（宽高）的Dom -->
      <div ref="main" style="width: 600px; height: 400px"></div>
    </el-card>
  </div>
</template>
<script>
// 1. 导入 echarts
import * as echarts from 'echarts'
export default {
  data() {
    return {}
  },
  // 在 mounted 中 ，页面的元素已经渲染完毕
  async mounted() {
    // 3. 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(this.$refs.main)

    // 4. 指定图表的配置项和数据
    var option = {
      backgroundColor: '#2c343c',
      textStyle: {
        color: 'rgba(255, 255, 255, 1)'
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          // Use axis to trigger tooltip
          type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
        }
      },
      legend: {
        data: [
          '电压过下限',
          '空开跳闸或停电',
          '单灯损坏',
          '白天亮灯',
          '回路状态异常'
        ],
        textStyle: {
          fontSize: 14,
          color: '#fff',
          rich: {
            b: { color: 'red' }
          }
        }
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      xAxis: {
        type: 'value'
      },
      yAxis: {
        type: 'category',
        data: ['周日', '周六', '周五', '周四', '周三', '周二', '周一']
      },
      series: [
        {
          name: '电压过下限',
          type: 'bar',
          stack: 'total',
          label: {
            show: true
          },
          emphasis: {
            focus: 'series'
          },
          data: [320, 302, 301, 334, 390, 330, 320]
        },
        {
          name: '空开跳闸或停电',
          type: 'bar',
          stack: 'total',
          label: {
            show: true
          },
          emphasis: {
            focus: 'series'
          },
          data: [120, 132, 101, 134, 90, 230, 210]
        },
        {
          name: '单灯损坏',
          type: 'bar',
          stack: 'total',
          label: {
            show: true
          },
          emphasis: {
            focus: 'series'
          },
          data: [220, 182, 191, 234, 290, 330, 310]
        },
        {
          name: '白天亮灯',
          type: 'bar',
          stack: 'total',
          label: {
            show: true
          },
          emphasis: {
            focus: 'series'
          },
          data: [150, 212, 201, 154, 190, 330, 410]
        },
        {
          name: '回路状态异常',
          type: 'bar',
          stack: 'total',
          label: {
            show: true
          },
          emphasis: {
            focus: 'series'
          },
          data: [820, 832, 901, 934, 1290, 1330, 1320]
        }
      ]
    }
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(Object.assign(option))
  }
}
</script>
